<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script>
      Vue.config.productionTip = false;
      /* 
      初始化阶段: 
        1. Vue或者某个组件被实例化,则进入初始化阶段
        2. `init Events & lifecycle`:初始化Vue或者组件实例(将来简称实例)的事件处理和生命周期
        3. 【beforeCreate】：数据初始化和数据劫持 创建之前,在这个阶段我们无法拿到数据,数据还没有开始初始化
        4. `init injections & reactivity`:初始化data数据及完成数据劫持(把数据转为响应式数据)，同时也会初始化props，computed，methods等选项
        5. 【created】:数据初始化和数据劫持 创建之后,这个是最早可以操作数据的生命周期函数
    */
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 10,
          };
        },
        beforeCreate() {
          console.log("beforeCreate", this, this.count);
          debugger;
        },
        created() {
          console.log("created", this, this.count);
          debugger;
        },
      });
    </script>
  </body>
</html>
